package modules

type ComponentUsageProps struct {
	ComponentName string
	// HasJS         bool
	JSFiles []string
}

templ ComponentUsage(props ComponentUsageProps) {
	if len(props.JSFiles) == 0 {
		@Code(CodeProps{
			CodeContent:    "templui add " + props.ComponentName,
			ShowCopyButton: true,
		})
	} else {
		<ol class="list-decimal pl-5 space-y-8">
			<li>
				<p class="mb-4 font-semibold">Install the component</p>
				@Code(CodeProps{
					CodeContent:    "templui add " + props.ComponentName,
					ShowCopyButton: true,
				})
			</li>
			<li>
				<p class="mb-4 font-semibold">Add the JavaScript to your layout</p>
				{{
					var files string
					for _, jsFile := range props.JSFiles {
						files += "@" + jsFile + ".Script()\n"
					}
				}}
				@Code(CodeProps{
					CodeContent:    files,
					ShowCopyButton: true,
				})
				<p class="text-sm text-muted-foreground mt-2">Call this template in your base layout file (e.g., in the &lt;head&gt; section).</p>
			</li>
		</ol>
	}
}
